<template>
  <!--判断是否增加还是修改-->
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :rules="rules"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @closed="dialogClose"
  >
    <!--创建表单-->
    <el-form
      :model="dataForm"
      :rules="rules"
      ref="dataForm"
      label-position="left"
      label-width="80px"
      size="medium"
    >
      <div class="card-container">
        <el-tabs v-model="Tab" type="border-card">
          <el-tab-pane name="tab1" label="必填信息">
            <el-row>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="姓名"
                  prop="name"
                  class="label-right-align"
                >
                  <el-input
                    v-model="dataForm.name"
                    type="text"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="grid-cell">
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="dataForm.sex">
                    <el-radio border :label="1">女</el-radio>
                    <el-radio border :label="0">男</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="手机号"
                  prop="phone"
                  class="label-right-align"
                >
                  <el-input
                    v-model="dataForm.phone"
                    type="text"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="身份证"
                  prop="card_id"
                  class="label-right-align"
                >
                  <el-input
                    v-model="dataForm.card_id"
                    type="text"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="grid-cell text">
                <el-form-item
                  label="地址"
                  prop="address"
                  class="label-right-align"
                >
                  <el-input
                    v-model="dataForm.address"
                    type="text"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="邮箱"
                  prop="Email"
                  class="label-right-align"
                >
                  <el-input
                    type="text"
                    v-model="dataForm.email"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="tab2" label="补充信息">
            <el-row>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                
                  label="出生日期"
                  prop="birthday"
                  class="label-right-align"
                >
                  <el-date-picker
                    v-model="dataForm.birthday"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                  </el-form-item>
               
                  <!--<el-input v-model="dataForm.birthday" type="text" clearable></el-input>-->
                
              </el-col>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="政治面貌"
                  prop="party"
                  class="label-right-align"
                >
                  <el-input
                    type="text"
                    v-model="dataForm.party"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="grid-cell">
                <el-form-item label="电话" prop="tel" class="label-right-align">
                  <el-input
                    type="text"
                    v-model="dataForm.tel"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="邮政编码"
                  prop="post_code"
                  class="label-right-align"
                >
                  <el-input
                    type="text"
                    v-model="dataForm.post_code"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="民族"
                  prop="race"
                  class="label-right-align"
                >
                  <el-input
                    type="text"
                    v-model="dataForm.race"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="学历"
                  prop="education"
                  class="label-right-align"
                >
                  <el-input
                    type="text"
                    v-model="dataForm.education"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="专业"
                  prop="speciality"
                  class="label-right-align"
                >
                  <el-input
                    type="text"
                    v-model="dataForm.speciality"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="grid-cell">
                <el-form-item
                  label="爱好"
                  prop="hobby"
                  class="label-right-align"
                >
                  <el-input
                    type="text"
                    v-model="dataForm.hobby"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-form-item label="QQ" prop="QQ_NUM" class="label-right-align">
                <el-input
                  v-model="dataForm.QQ_NUM"
                  type="text"
                  clearable
                ></el-input>
              </el-form-item>
            </el-row>

            <el-row>
              部门：
              <!--{{ this.deptList }}-->
              <el-select
                filterable
                remote
                clearable
                reserve-keyword
                v-model="dataForm.dept_id"
                placeholder="请输入部门"
                :remote-method="removeMethod"
                :loading="loading"
              >
                <el-option
                  v-for="item in   this.deptList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-row>

            <el-row>
              职位：
  
              <el-select
                filterable
                remote
                clearable
                reserve-keyword
                v-model="dataForm.job_id"
                placeholder="请输入职位"
                :remote-method="removeMethods"
                :loading="loadings"
              >
                <el-option
                  v-for="item in this.jobList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-row>
            <!-- </el-card>
     </div> -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
//impo是引入对象
import { name } from "body-parser";
import qs from "qs";

export default {
  data() {
    return {
      //部门
      remoteOptions: [], // 远程搜索列表
      remoteLoading: false, // 是否正在从远程获取数据

      //职位
      remoteOption: [], // 远程搜索列表
      remoteLoading: false, // 是否正在从远程获取数据

      //存放部门信息
      deptList: [],
      //存放职位信息
      jobList: [],
      //是否在加载
      loading: false,
      loadings: false,
      Tab: "tab1",
      visible: false,
      dataForm: {
        name: "",
        tel: "",
        QQ_NUM: "",
        email: "",
        phone: "",
        birthday: "",
        race: "",
        speciality: "",
        hobby: "",
        education: "",
        card_id: "",
        party:"",
        address: "",
        post_code: "",
        sex: 0,
        dept_id: undefined,
        job_id: undefined,
        id: 0,
      },

      rules: {
        name: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        card_id: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮件", trigger: "blur" },
          { min: 5, max: 18, message: "长度在 5 到 18个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.init(this.id);
  },
  methods: {
    //部门
    removeMethod(query) {
      if (query != "") {
        this.remoteOptions = [];
        console.log(this);
        //执行发送查找所有的部门请求
        this.$axios
          .get("http://localhost:8080/hrm/findDept")
          .then((response) => {
            this.deptList = response.data.depts;

            // 为每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
            for (const i of response.data.depts) {
              // 将想要展示的数据作为value
              i.value = i.id;
              i.label = i.name;
            }
            this.deptList = response.data.depts;
            console.log(this.deptList);
          });
        //延时器
        setTimeout(() => {
          this.remoteLoading = false;
          this.remoteOptions = this.deptList.filter((item) => {
            return item.label.indexOf(query) > -1;
          });
          console.log("this.remoteOptions");
          console.log(this.remoteOptions);
        }, 200);
      } else {
        this.remoteOptions = [];
      }
    },

    //职位
    removeMethods(query) {
      if (query != "") {
        console.log(this);
        //执行发送查找所有的部门请求
        this.$axios
          .get("http://localhost:8080/hrm/findJob")
          .then((response) => {
            this.jobList = response.data.jobs;

            // 为每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
            for (const i of response.data.jobs) {
              // 将想要展示的数据作为value
              i.value = i.id;
              i.label = i.name;
            }
            this.jobList = response.data.jobs;
            console.log(this.jobList);
          });
        //延时器
        setTimeout(() => {
          this.remoteLoading = false;
          this.remoteOption = this.jobList.filter((item) => {
            return item.label.indexOf(query) > -1;
          });
          console.log("this.remoteOption");
          console.log(this.remoteOption);
        }, 200);
      } else {
        this.remoteOption = [];
      }
    },

    //对话框关闭
    dialogClose() {
      console.log("对话框关闭了");
    },

    //index.vue传进来的id
    //修改的用户信息要发请求
    init(id) {
      //如果用户的id传进来了，就是id，没有则为0
      this.dataForm.id = id || 0;
      this.visible = true; //显示对话框
      this.$nextTick(() => {
        //重置表单的所有字段
        this.$refs["dataForm"].resetFields();
        //判断
        if (this.dataForm.id) {
          var $this = this;
          //发异步请求到后台获取这个用户数据
          this.$axios
            .get(`http://localhost:8080/hrm/findEmployeeById?id=` + id)
            .then(function (response) {
              //判断状态是否为200
              if (response.data && response.data.code === 200) {
                //修改前显示弹窗里面的值
                $this.dataForm.name=response.data.employees.name;
                $this.dataForm.address = response.data.employees.address;
                $this.dataForm.phone = response.data.employees.phone;
                $this.dataForm.sex=response.data.employees.sex;
                $this.dataForm.party=response.data.employees.party;
                $this.dataForm.race=response.data.employees.race;
                $this.dataForm.hobby=response.data.employees.hobby;
                $this.dataForm.education=response.data.employees.education;
                $this.dataForm.speciality=response.data.employees.speciality;
                $this.dataForm.birthday=response.data.employees.birthday;
                $this.dataForm.tel=response.data.employees.tel;
                $this.dataForm.QQ_NUM=response.data.employees.QQ_NUM;
                $this.dataForm.post_code=response.data.employees.post_code;
                $this.dataForm.email = response.data.employees.email;
                $this.dataForm.card_id = response.data.employees.CARD_ID;
                $this.dataForm.dept_id=response.data.employees.dept.name;
                $this.dataForm.job_id=response.data.employees.job.name;
              }
            });
        }
      });
    },

    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          var $this = this;
          //没有表单的id是新增，有是修改

          const url =
            `http://localhost:8080/hrm/` +
            (!this.dataForm.id ? "addEmployee" : "updateEmployee");
          //异步请求  qs.stringify(this.dataForm):整个表单序列化
          console.log(url);
          console.log(this.dataForm);
          this.$axios
            .post(url, qs.stringify(this.dataForm))
            .then(function (response) {
              //判断状态是否为200
              if (response.data.code === 200) {
                $this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  //关闭弹窗
                  onClose: () => {
                    $this.visible = false;
                    //更新表中的内容
                    $this.$emit("refreshDataList");
                  },
                });
              } else {
                //不成功的提示
              }
            });
        } else {
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
</style>